<template>
  <div>
    <cus-modal
      ref="modal"
      :title="form.id ? '编辑' : '添加'"
      :width="960"
      @on-visible-change="onVisibleChange"
    >
      <Form
        ref="formValidate"
        :rules="ruleValidate"
        :model="form"
        :label-width="130"
      >
        <FormItem label="采购模式名称" prop="name">
          <Input
            v-model="form.name"
            maxlength="20"
            clearable
            :disabled="form.systemPattern == 1"
            style="width: 175px"
            placeholder="请输入采购模式名称"
          ></Input>
        </FormItem>
        <FormItem label="采购计划提前量" :label-width="125" class="mr_10 mb_20">
          <Select
            v-model="form.purchasingWay"
            @on-change="purchasePlanChange"
            :disabled="form.systemPattern == 1"
            placeholder="全部"
            style="width: 200px"
          >
            <Option
              v-for="item in purchasePlanTree"
              :value="item.value"
              :key="item.label"
            >
              {{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <div class="mr_10 mb_20 flex">
          <Select
            v-model="form.getTimes"
            @on-change="mealChange"
            :disabled="
              form.purchasingWay == 2 ||
                form.purchasingWay == 3 ||
                form.systemPattern == 0
            "
            placeholder=""
            style="width: 50px"
          >
            <Option
              v-for="item in mealTree"
              :value="item.value"
              :key="item.label"
            >
              {{ item.label }}</Option
            >
          </Select>
          <div
            class="flex"
            style="
              height: 90%;
              width: 60px;
              border: 1px solid #d7dde4;
              border-left: none;
            "
          >
            餐一送
          </div>
        </div>
      </Form>
      <Table
        border
        :loading="form.loading"
        :columns="columns"
        :data="data"
        :height="data.length > 10 ? 529 : ''"
        :size="vuex_config.tableSize"
      >
        <template slot-scope="{ row, index }" slot="remarkOperation">
          <div>
            <Input
              v-model="row.remark"
              placeholder=""
              :disabled="form.systemPattern == 1"
              @on-change="remarkOnChange(row, index)"
              maxlength="200"
              style="width: 230px"
            />
          </div>
        </template>
      </Table>
      <Spin size="large" fix v-if="loading"></Spin>
      <div slot="footer">
        <slot name="footer">
          <div class="modal-footer">
            <cus-button size="small" class="mr_2" @onClick="onCancel"
              >取消</cus-button
            >
            <cus-button type="primary" size="small" @onClick="onOk"
              >确认</cus-button
            >
          </div>
        </slot>
      </div>
    </cus-modal>
  </div>
</template>

<script>
import {
  saveFoodBookServicePurchasingPattern,
  selectFoodBookServicePurchasingPatternDtl
} from "@/api/business/manager";
const form = {
  id: 0,
  name: "", //模式名称
  checkStatus: 0, // 默认状态
  purchasingWay: 1, // 采购计划提前量value
  getTimes: 3, // 配送餐次
  systemPattern: null // 判断是否可编辑
};
const purchasePlanTree = [
  {
    label: "当日采购",
    value: 0
  },
  {
    label: "提前一日采购",
    value: 1
  },
  {
    label: "提前采购次日早餐",
    value: 2
  },
  {
    label: "提前采购次日早餐、午餐",
    value: 3
  }
];
const mealTree = [
  {
    label: "1",
    value: 1
  },
  {
    label: "3",
    value: 3
  },
  {
    label: "6",
    value: 6
  },
  {
    label: "9",
    value: 9
  }
];
const columns = [
  {
    //菜肴属性维护Table表头数据
    title: "序号",
    type: "index",
    width: 70,
    align: "center"
  },
  {
    title: "配送餐次",
    minWidth: 90,
    key: "mealTimes",
    align: "center"
  },
  {
    title: "配送时间",
    minWidth: 90,
    key: "week",
    align: "center"
  },
  {
    title: "备注",
    minWidth: 90,
    key: "remark",
    slot: "remarkOperation",
    align: "center"
  }
];
const week = [
  "星期一早餐",
  "星期一午餐",
  "星期一晚餐",
  "星期二早餐",
  "星期二午餐",
  "星期二晚餐",
  "星期三早餐",
  "星期三午餐",
  "星期三晚餐",
  "星期四早餐",
  "星期四午餐",
  "星期四晚餐",
  "星期五早餐",
  "星期五午餐",
  "星期五晚餐",
  "星期六早餐",
  "星期六午餐",
  "星期六晚餐",
  "星期日早餐",
  "星期日午餐",
  "星期日晚餐"
];
const threeData = [
  {
    mealTimes: "星期一早餐",
    week: "上星期日晚上配送次日早餐",
    remark: ""
  },
  {
    mealTimes: "星期二早餐, 星期一午餐, 星期一晚餐",
    week: "星期一晚上配送次日早餐,星期一配送其它餐次",
    remark: ""
  },
  {
    mealTimes: "星期三早餐, 星期二午餐, 星期二晚餐",
    week: "星期二晚上配送次日早餐,星期二配送其它餐次",
    remark: ""
  },
  {
    mealTimes: "星期四早餐, 星期三午餐, 星期三晚餐",
    week: "星期三晚上配送次日早餐,星期三配送其它餐次",
    remark: ""
  },
  {
    mealTimes: "星期五早餐, 星期四午餐, 星期四晚餐",
    week: "星期四晚上配送次日早餐,星期四配送其它餐次",
    remark: ""
  },
  {
    mealTimes: "星期六早餐, 星期五午餐, 星期五晚餐",
    week: "星期五晚上配送次日早餐,星期五配送其它餐次",
    remark: ""
  },
  {
    mealTimes: "星期日早餐, 星期六午餐, 星期六晚餐",
    week: "星期六晚上配送次日早餐,星期六配送其它餐次",
    remark: ""
  },
  {
    mealTimes: "星期一午餐, 星期一晚餐",
    week: "星期日配送其它餐次",
    remark: ""
  }
];
const fourData = [
  {
    mealTimes: "星期一早餐，星期一午餐",
    week: "上星期日晚上配送次日早餐、午餐",
    remark: ""
  },
  {
    mealTimes: "星期一晚餐，星期二早餐，星期二午餐	",
    week: "星期一晚上配送次日早餐、午餐,星期一配送其它餐次",
    remark: ""
  },
  {
    mealTimes: "星期二晚餐，星期三早餐，星期三午餐",
    week: "星期二晚上配送次日早餐、午餐,星期二配送其它餐次",
    remark: ""
  },
  {
    mealTimes: "星期三晚餐，星期四早餐，星期四午餐",
    week: "星期三晚上配送次日早餐、午餐,星期三配送其它餐次",
    remark: ""
  },
  {
    mealTimes: "星期四晚餐，星期五早餐，星期五午餐",
    week: "星期四晚上配送次日早餐、午餐,星期四配送其它餐次",
    remark: ""
  },
  {
    mealTimes: "星期五晚餐，星期六早餐，星期六午餐",
    week: "星期五晚上配送次日早餐、午餐,星期五配送其它餐次",
    remark: ""
  },
  {
    mealTimes: "星期六晚餐，星期日早餐，星期日午餐",
    week: "星期六晚上配送次日早餐、午餐,星期六配送其它餐次",
    remark: ""
  },
  {
    mealTimes: "星期日晚餐",
    week: "星期日配送其它餐次",
    remark: ""
  }
];

export default {
  components: {},
  name: "addProcurement",
  data() {
    return {
      ruleValidate: {
        name: [
          { required: true, message: "采购模式名称不能为空", trigger: "change" }
        ]
      },
      loading: false,
      form,
      columns,
      data: [],
      threeData, //提前采购次日早餐,三餐一送
      fourData, //提前采购次日早,午餐
      week,
      map1: new Map(), // 提前一日采购
      purchasePlanTree, //采购计划提前量Tree数据
      mealTree //配送餐次
    };
  },

  mounted() {
    this.form = this.$cu.deepClone(form);
    this.map1.set("星期一", "上星期日");
    this.map1.set("星期二", "星期一");
    this.map1.set("星期三", "星期二");
    this.map1.set("星期四", "星期三");
    this.map1.set("星期五", "星期四");
    this.map1.set("星期六", "星期五");
    this.map1.set("星期日", "星期六");
  },
  methods: {
    onVisibleChange(v) {
      this.$refs["formValidate"].resetFields();
      if (!v) this.form = this.$cu.deepClone(form);
    },
    show() {
      this.loading = false;
      this.$refs["modal"].show = true;
      this.form.name = `${this.form.getTimes}餐一送`;
      this.mealChange(this.form.getTimes);
    },
    /*
     *1,当日采购
     *2,提前一日采购
     *3,提前采购次日早餐
     *提前采购次日早餐,午餐
     */
    purchasePlanChange(row) {
      if (row == 0 || row == 1) {
        this.mealChange(this.form.getTimes);
      }
      if (row == 2) {
        this.form.getTimes = 3;
        this.data = this.threeData;
      }
      if (row == 3) {
        this.form.getTimes = 3;
        this.data = this.fourData;
      }
    },
    mealChange(v) {
      this.getDate(v);
      this.data.forEach(t => {
        if (this.form.purchasingWay == 0) {
          t.week = t.mealTimes.substring(0, 3);
        }
        if (this.form.purchasingWay == 1) {
          t.week = this.map1.get(t.mealTimes.substring(0, 3));
        }
      });
      this.form.name = `${this.form.getTimes}餐一送`;
    },
    getDate(v) {
      this.data = [];
      let len = Math.trunc(week.length / v);
      for (let i = 0; i < len; i++) {
        let obj = {
          mealTimes: this.week.slice(i * v, i * v + v).toString(),
          week: "",
          remark: ""
        };
        this.data.push(obj);
      }
      if (week.length % v != 0)
        this.data.push({
          mealTimes: this.week.slice(len * v, week.length + 1).toString(),
          week: "",
          remark: ""
        });
    },
    //table表格remark
    remarkOnChange(row, index) {
      this.$set(this.data[index], "remark", row.remark);
      console.log(row, index);
    },
    // 模态框确认
    onOk() {
      this.$refs["formValidate"].validate(valid => {
        if (valid) {
          this.loading = true;
          this.saveFoodBookServicePurchasingPatternApi();
        }
      });
    },
    //取消
    onCancel() {
      this.$refs["modal"].show = false;
    },
    //添加采购模式------------------------------接口
    saveFoodBookServicePurchasingPatternApi() {
      return new Promise((resolve, reject) => {
        let params = {
          checkStatus: this.form.checkStatus,
          getTimes: this.form.getTimes,
          name: this.form.name,
          purchasingPatternDtl: this.data,
          purchasingPatternId: this.form.id,
          purchasingWay: this.form.purchasingWay
        };
        saveFoodBookServicePurchasingPattern(params).then(res => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.$parent.onInit();
            this.$Message.success(res.retMsg);
            this.$refs["modal"].show = false;
            resolve();
          }
        });
      });
    },
    //获取编辑采购模式--------------------------接口
    selectFoodBookServicePurchasingPatternDtlApi() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        let params = {
          checkStatus: this.form.checkStatus,
          patternId: this.form.id,
          current: 1,
          size: 100
        };
        selectFoodBookServicePurchasingPatternDtl(params).then(res => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data;
            console.log(res);
            resolve();
          }
        });
      });
    }
  },
  watch: {
    // 'form.getTimes' (newVal) {
    //   this.form.name = `${newVal}餐一送`;
    // }
  }
};
</script>

<style scoped></style>
